<template>
  <div>
    <h2>当前求和:{{ sum }}</h2>
    <button @click="sum++">点击+1</button>
    <hr>
    <h2>当前信息为:{{ msg }}</h2>
    <button @click="msg=msg+'!'">修改信息</button>

    <h1>姓名: {{ person.name }}</h1>
    <h1>年龄: {{ person.age }}</h1>
    <h1 >薪资: {{ person.job.job1.salary }}k</h1>
<button @click="person.name+='~'">修改姓名</button>
<button @click="person.age++">修改年龄</button>
<button @click="person.job.job1.salary++">涨薪</button>
  </div>
</template>
<script>
import { ref,  reactive,watchEffect } from "vue";

export default {
  name: "Demo",
  // watch:{
  //   sum:{
  //     immediate:true,
  //     handler(newVal,oldVal){
  //       console.log(newVal,oldVal)
  //     }
  //   }
  // },
  setup(props, context) {
    let sum = ref(0);

    let msg =ref("你好啊")

    let person = reactive(
      {
      name:"JJ",
      age:18,
      job:{
        job1:{
          salary:20
        }
      }
    }
    )

    //情况一:监视ref所定义的一个响应式数据
    watchEffect(()=>{
      let x = sum.value; // 记得.value
      let y= person.job.job1.salary+x;
      console.log("watchEffect")
    })

   
    return {
      sum,
      msg,
      person
    };
  }
};
</script>
  
  <style>
</style>
  
 